<script setup lang="ts">
import { ref } from 'vue';
import '../styles/TodoList.css';

interface Todo {
  text: string;
  done: boolean;
  isEditing: boolean;
}

const todos = ref<Todo[]>([]);
const newTodo = ref('');

const addTodo = () => {
  if (newTodo.value.trim()) {
    todos.value.push({ text: newTodo.value, done: false, isEditing: false });
    newTodo.value = '';
  }
};

const removeTodo = (index: number) => {
  todos.value.splice(index, 1);
};

const startEditing = (index: number) => {
  todos.value[index].isEditing = true;
};

const stopEditing = (index: number) => {
  todos.value[index].isEditing = false;
};
</script>

<template>
  <div class="repo-link">
    <a href="https://gitee.com/rran99/001.git" target="_blank">仓库地址</a>
  </div>
  <div class="todo-container">
    <h1>待办事项列表</h1>
    <div class="input-wrapper">
      <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加新的待办事项">
      <button @click="addTodo">添加</button>
    </div>
    <ul>
      <li v-for="(todo, index) in todos" :key="index" :class="{ completed: todo.done, editing: todo.isEditing }">
        <div class="todo-content">
          <input type="checkbox" v-model="todo.done">
          <span v-if="!todo.isEditing" @dblclick="startEditing(index)">{{ todo.text }}</span>
          <input v-else v-model="todo.text" @keyup.enter="stopEditing(index)" @blur="stopEditing(index)">
        </div>
        <button @click="removeTodo(index)">删除</button>
      </li>
    </ul>
  </div>
</template>
